import React, { useEffect, useState, Key } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input, Card, Table, Tooltip, message } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

// 引入数据类型
import {
  IhospitalSetsArr,
  IhospitalSet,
} from '@api/hospital/hospitalSet/model/hospitalSetTypes'
// 引入发送请求的函数
import {
  reqGetHospitalSets,
  reqDelHospitalSet,
  reqBatchDelHospitalSet,
} from '@api/hospital/hospitalSet'

let flag = false // 这个变量用来判断用户是否点击了查询按钮. false表示没有点击,true 点击
export default function HospitalSet() {
  // laoding效果
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()
  // 创建form实例
  const [form] = Form.useForm()
  // 定义状态,存储表格的数据
  // 调用useState的时候,通过泛型,确定状态的数据类型是什么
  const [hospitalSets, setHospitalSets] = useState<IhospitalSetsArr>([])
  // 总共有多少条数据
  const [total, setTotal] = useState(50)
  // 一页多少条的状态
  const [pageSize, setPageSize] = useState(2)
  // 存储当前第几页高亮
  const [page, setPage] = useState(1)

  // 存储要批量删除的数据的id
  // Key是react包中提供的一个数据类型,表示不重复的值
  const [keys, setKeys] = useState<Key[]>([])
  // 组件挂载获取医院设置表格数据
  // 注意: useEffect的回调函数,不能设置为异步函数
  useEffect(() => {
    getHospitalSets(page, pageSize)
  }, [])

  // 获取表格数据的函数
  async function getHospitalSets(page: number, pageSize: number) {
    // 获取筛选条件的hosname和hoscode
    // 1. 创建一个form实例对象 Form.useForm()返回的
    // 2. 使用form实例和对应的Form组件进行绑定
    // 3. 利用form的方法,获取表单里面的数据
    setLoading(true)
    let result
    if (flag) {
      const { hosname, hoscode } = form.getFieldsValue()
      result = await reqGetHospitalSets(page, pageSize, hosname, hoscode)
    } else {
      result = await reqGetHospitalSets(page, pageSize)
    }
    // 注意: 由于表格数据是服务器响应的.所以ts不知道是什么数据.无法继续检查.所以我们在定义发送请求的函数时,应该利用泛型将响应数据的格式告诉给ts
    setHospitalSets(result.records)
    setTotal(result.total)
    setLoading(false)
  }
  // 点击查询按钮,onFinish会触发
  const onFinish = () => {
    // 先标记查询按钮点击了,然后再发请求
    flag = true
    setPage(1)
    getHospitalSets(1, pageSize)
  }

  // columns数组中有多少个对象,表格就有多少列
  const columns: ColumnsType<IhospitalSet> = [
    {
      title: '序号', // 设置表头
      // 如果只写了dataIndex.不写render. 则dataIndex决定了这一列渲染dataSource数据中的哪个字段
      // 如果既写了dataIndex.又写了render.则渲染由render决定.render函数接收的第一个参数又dataIndex决定
      // 如果不写dataIndex,则render第一个参数就是dataSource的数据
      // dataIndex: 'name',
      // key: 'name',
      // 如果有render,则render返回什么,当前列就渲染什么
      render: (text, records, index) => {
        // text由dataIndex决定
        // records 就是dataSource的数据
        // index 是数据的下标
        return index + 1
      },
      align: 'center', //让这一列的文本水平居中显示
      width: 80,
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',

      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人名称',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',

      render: (_, record) => (
        <>
          <Tooltip title="修改医院">
            <Button
              type="primary"
              icon={<EditOutlined />}
              style={{ marginRight: 10 }}
              onClick={() => {
                navigate(`/syt/hospital/hospitalSet/update/${_.id}`)
              }}
            ></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              onClick={async () => {
                // 1. 拿到id

                // 2. 发送请求
                await reqDelHospitalSet(_.id)
                // 3. 提示用户
                message.success('删除医院设置成功')
                // 4. 刷新表格
                getHospitalSets(page, pageSize)
              }}
            ></Button>
          </Tooltip>
        </>
      ),
      fixed: 'right',
      width: 110,
    },
  ]

  return (
    <Card>
      <Form
        form={form} //绑定之后.form实例就可以操作这个Form表单了
        layout="inline" // 让表单中的所有表单元素在一行显示
        onFinish={onFinish}
        style={{ marginBottom: 20 }}
      >
        <Form.Item
          name="hosname" // 当前表单项的name.类似于html中表单元素的name
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            onClick={() => {
              flag = false
              // 清空表单中文本框的值
              form.setFieldsValue({ hosname: '', hoscode: '' })
              setPage(1)
              getHospitalSets(1, pageSize)
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      <Button
        type="primary"
        style={{ marginRight: 20 }}
        onClick={() => {
          navigate('/syt/hospital/hospitalSet/add')
        }}
      >
        添加
      </Button>
      <Button
        type="primary"
        danger
        disabled={!keys.length}
        onClick={async () => {
          await reqBatchDelHospitalSet(keys)
          message.success('批量删除成功')
          getHospitalSets(page, pageSize)
        }}
      >
        批量删除
      </Button>
      {/* columns: 决定了表格中有多少列,并且每一列的标题是什么
          dataSource: 决定了表格中渲染的数据
          bordered 给表格添加边框
          scroll={{ x: 1500 }} 让表格可以滚动,水平方向滚动. 1500是滚动区域
      */}
      <Table
        rowSelection={{
          // 选择复选框的时候触发
          onChange(selectedKeys) {
            // selectedKeys 选中的数据的id所存放的数组
            // console.log(selectedKeys)
            setKeys(selectedKeys)
          },
        }} // 展示表格中的复选框
        loading={loading}
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={hospitalSets}
        bordered
        scroll={{ x: 1500 }}
        // rowkey表示当表格渲染的时候,使用每一条数据的id,作为key值
        rowKey="id"
        pagination={{
          current: page, // 控制对应的页面高亮
          // 这里写的配置项,可以控制Table内置的pagination
          total, // 告诉分页总共有多少条数据
          pageSize, // 一页多少条
          // 在分页前面展示一段提示信息
          showTotal(total) {
            return `总共: ${total}条`
          },
          showSizeChanger: true, // 展示修改一页多少条的控件
          pageSizeOptions: [2, 5, 10], // 自定义一页多少条的拉下框中的内容
          showQuickJumper: true, // 展示快速跳转
          // 当点击分页器,则会触发
          onChange(page, pageSize) {
            // 重新获取表格数据
            getHospitalSets(page, pageSize)
            setPageSize(pageSize)
            setPage(page)
          },
        }}
      />
    </Card>
  )
}
